import Fetch from '../modules/fetch'
import Jsonp from 'jsonp'
import $ from 'jquery'

class CorrelationVideoComponent extends React.Component {   
    constructor(props,context){
        super(props,context)

        this.state={
        	boxList:[]
        }
    }
    componentWillMount(){
    	this.getBoxData()
    }
    
    getBoxData(){
    	let that = this;
//  	https://api.bilibili.com/x/web-interface/ranking?rid=0&day=3&jsonp=jsonp

		Fetch.Get('http://localhost:9000/bilili/x/web-interface/ranking',{
//			rid:0,
			day:3
//			'jsonp':'jsonp'

		}).then(res=>{return res.json()}).then(json=>{

						that.setState({boxList:json.data.list})
      })
    }
    
    showBoxWords(){
        let that = this
		let str = ''
		
        	this.state.boxList.forEach((item,i)=>{
        		let _src = item.pic.replace("http","https")

        		if(i<10){
       			
					str+= `			
							<div class='tuijian__box'>
			    				<span class='tuijian__box__num'>${i+1}</span>				
								<img src='${_src+"@234w_146h.webp"}' class='tuijian__box__pic'/>
								<div class='tuijian__box__main'>
									<p>${item.title}</p>
									<p>作者----${item.author}</p>
									<p>播放数----${item.play}</p>
								</div>
								
							</div>
							<hr/>
						`		    		
        		}
         
	        })
			$('.aaa').html(str)

    }
    
    changeTowhat(){
		$(location).attr('href', '#/reg');
	}
     changeTowhat2(){
		$(location).attr('href', '#/');
	}
      changeTowhat3(){
		$(location).attr('href', '#/video');
	}
    
    render(){

        return (     
        		<div>
	        		
	        		<div className='aaa'>        			
	        			{this.showBoxWords()}
	        		</div>
        		</div>
        )
    }
    componentDidUpdate() {

        $(".tuijian__box__pic").each((index, item)=>{
            $(item).on("error", ()=>{
                $(item).attr("src", "./lib/images/403.png")
            })
        })
    }
}
//定义默认属性
CorrelationVideoComponent.defaultProps={

}



export default CorrelationVideoComponent